<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" @down="downCallback">
			<view class="spread-order">
				<view class="order-container">
					 <!-- @click="apifun.navigate('/bundle/pages/brokerage','id='+item.id)" -->
					<view v-for="(item, index) in list" :key="item.order_sn"
					class="order-item bg-white m-t-20">
						<view class="order-header flex row-between">
							<view>订单编号：{{item.order_sn}}</view>
						<!-- 	<view class="static sm"
								:style="{color: item.status == 1 ? colorConfig.primary : item.status == 3 ? '#909090' : '#f5335e'}">
								{{item.statusDesc}}
							</view> -->
						</view>
						<view class="order-con">
							<order-goods :list="item.order_goods"></order-goods>
							<view class="flex-s" style="padding: 0 14rpx 14rpx 0;">
								<view class=" flex-start GZbox">
									<image class="avatar" :src="item.user_info.avatar" mode=""></image>
									<view class="nickname">{{item.user_info.nickname}}</view>
								</view>
								<view class="all-price flex row-right">
									<text class="muted xs">共{{item.goods_count}}件商品，实付款：</text>
									<price-format weight="500" :subscript-size="30" :first-size="30" :second-size="30"
										:price="item.order_amount"></price-format>
								</view>
							</view>
						</view>
	<!-- 					<view class="order-footer flex row-between">
							<view class="time muted sm">{{item.create_time}}</view>
							<view class="time sm flex-s">
								<image class="time_avatar" :src="item.user_info.avatar" mode=""></image>
								<view class="">{{item.user_info.nickname}}</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		shopServerlists,
	} from "@/api/user"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无记录', // 提示
					}
				},
				list: [], 
				activenav1: 1,
				activenav: 0,
				id: '',
				time: '',
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.time = option.time
		},
		methods: {
			upCallback(page) {
				console.log('page',page)
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
					shopServerlists({
						page_size: page.size,
						page_no: page.num,
						serve_user_id: this.id,
						time_type: this.time,
					}).then(({
						data
					}) => {
						if (page.num == 1) this.list = [];
						const curPageData = data.list;
						const curPageLen = curPageData.length;
						const hasNext = !!data.more;
						this.list = this.list.concat(curPageData); 
						this.mescroll.endSuccess(curPageLen, hasNext);
					}).catch(() => {
						this.mescroll.endErr()
					})
			},
			navclick(type) { //切换状态
			// this.downCallback()
				let that = this;
				that.activenav = type;
				that.downCallback() 
			},
		}
	}
</script>

<style lang="scss">
	.GZbox{
		margin-bottom: 6rpx;
		margin-left: 20rpx;
	}
	.nickname{
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.avatar{
		width: 46rpx;
		height: 46rpx;
		border-radius: 50rpx;
	}
	.spread-order {
		.spread-header {
			height: 240rpx;
			background-color: var(--primary-color);
			padding-top: 60rpx;

			.deal-num {
				flex: 1;
				align-self: flex-start;

				.num {
					font-size: 42rpx;
				}

				.explain {
					line-height: 34rpx;
					margin-top: 16rpx;
				}
			}

			.income-num {
				flex: 1;
				align-self: flex-start;

				.explain {
					line-height: 34rpx;
					margin-top: 12rpx;
				}
			}
		}


		.order-container {
			padding: 0 20rpx;
			.order-item {
				border-radius: 14rpx;

				.order-header {
					padding: 20rpx 30rpx;
					border-bottom: $-solid-border;

					.status {
						color: #F95F2F;
					}
				}

				.order-content {
					padding: 20rpx 30rpx 20rpx 20rpx;
					border-bottom: $-solid-border;
					.order-goods-info {
						text-align: left;
						flex: 1;

						.name {
							line-height: 36rpx;
						}

						.pre-income {
							line-height: 34rpx;
							margin-top: 8rpx;
						}
					}
				}

				.order-footer {
					padding: 20rpx 30rpx 20rpx 20rpx;

					.static {
						color: #F95F2F;
					}

					.wait-return {
						color: #F95F2F;
					}
					.time_avatar{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						margin-right: 12rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}

</style>
